<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item.id" class="m-cost">
        <van-row>
          <van-col span="10"> {{ item.createTime }}</van-col>
          <van-col span="3"> {{ item.sort | sortFlt }}</van-col>
          <van-col span="6" style="color: green; font-weight: bold">
            {{ item.money }}元</van-col
          >
          <van-col v-if="item.status === 2" span="5" style="color: green"
            >老板已确认</van-col
          >
          <van-col v-else span="5">
            <van-button type="primary" size="small" block @click="putSpend(item)">确 认</van-button>
          </van-col>
        </van-row>
        <div style="color: grey;">{{ item.type }}</div>
      </div>
    </van-list>
  </div>
</template>
<script>
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import { mapGetters } from 'vuex'
import { getSpendBySid, putSpendById } from '@/api/ym'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'

export default {
  components: {
    [Notify.name]: Notify,
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col
  },
  filters: {
    sortFlt (sort) {
      switch (sort) {
        case 0:
          return '房租'
        case 1:
          return '物业'
        case 2:
          return '水电'
        case 3:
          return '宽带'
        case 4:
          return '管家'
        case 5:
          return '操作'
        case 6:
          return '其他'
        case 7:
          return '耗材'
        case 8:
          return '三方'
        case 9:
          return '流量'
        case 10:
          return '客情'
        case 11:
          return '运营'
      }
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  // created () {
  //   this.fetchData()
  // },
  methods: {
    onLoad () {
      this.loading = false
      getSpendBySid(this.openId, 0).then(res => {
        this.list = res.data.data
        this.finished = true
      })
      // this.list = [
      //   { cdate: '2024/02', name: '房租', status: 1, money: '888￥' },
      //   { cdate: '2024/02', name: '宽带', status: 2, money: '888￥' },
      //   { cdate: '2024/02', name: '客情', status: 1, money: '888￥' },
      //   { cdate: '2024/02', name: '客情', status: 2, money: '888￥' },
      //   { cdate: '2024/01', name: '房租', status: 2, money: '888￥' },
      //   { cdate: '2024/01', name: '客情', status: 2, money: '888￥' }
      // ]
    },
    putSpend(val) {
      const dataInfo = new FormData()
      dataInfo.append('status', 2)
      dataInfo.append('sid', this.openId)
      dataInfo.append('sort', val.sort)
      dataInfo.append('money', val.money)
      putSpendById(val.id, dataInfo).then(_ => {
        val.status = 2
        Notify({ type: 'success', message: '已确认' })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.m-cost {
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  box-shadow: 0px 0px 5px rgb(201, 201, 201);
  margin-bottom: 3px;
}
</style>
